<template>
  <VDialog
    @close="handleClose"
    :loading="loading"
    :disabled="true"
    title="操作日志"
    width="50%"
  >
    <template #content>
      <div class="pt-[10px]">
        <vxe-grid v-bind="tableOptions" ref="tableRef" />
      </div>
    </template>
  </VDialog>
</template>

<script setup lang="jsx">
import { operateLog } from "./api.js";
import { logList } from "@/data/log.js";
const props = defineProps({
  id: { type: [String, Number], default: null },
  autoLoad: { type: Boolean, default: true },
  module: { type: [String, Number], default: null },
});
const emit = defineEmits(["update:modelValue", "close"]);
const loading = ref(false);

const tableRef = ref();
watch(
  () => props.id,
  (val) => {
    if (!val) return;
    nextTick(() => {
      tableRef?.value?.commitProxy("query");
    });
  }
);
const tableOptions = reactive({
  height: 560,
  pagerConfig: { pageSize: 20 },
  showOverflow: false,
  columns: [
    {
      field: "username",
      title: "操作人",
      width: 200,
    },
    { field: "createdAt", title: "操作时间", width: 170 },
    {
      field: "operateType",
      title: "操作类型",
      width: 100,
      slots: {
        default: ({ row }) => {
          return <div>{row.operateType == "STORE" ? "添加" : "修改"}</div>;
        },
      },
    },
    {
      title: "操作说明",
      minWidth: 220,
      slots: {
        default: ({ row }) => {
          return (
            <div>
              {row.payload.map((item, index) => (
                <div key={index}>
                  {item.content ? (
                    <div>{item.content}</div>
                  ) : item.oldVal ? (
                    <div>
                      {item.name}从({item.oldVal})变更为({item.newVal})
                    </div>
                  ) : (
                    <div>
                      {item.name}变更为({item.newVal})
                    </div>
                  )}
                </div>
              ))}
            </div>
          );
        },
      },
    },
  ],
  data: [],
  proxyConfig: {
    autoLoad: props.autoLoad,
    props: {
      result: "data",
      total: "total",
    },
    ajax: {
      query: ({ page }) => {
        const { pageSize, currentPage } = page;
        page = {
          pageSize,
          pageNum: currentPage,
        };
        return operateLog({
          ...page,
          module: logList[props.module],
          key: props.id,
        });
      },
    },
  },
});
const handleClose = () => {
  emit("update:modelValue", false);
  emit("close");
};
</script>
